<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简单发布订阅演示</title>
</head>
<body>
  <script>
    // 这种设计模式也是前端中用的比较多的 你们可以用类模拟发布订阅模式
    // 这里就简单演示原理
    // 订阅者
    let zs = {
      update: function (v) {
        // 更新了
        console.log('我是张三我收到发布者发布的消息', v)
      }
    }
    let ls = {
      update: function (v) {
        // 更新了
        console.log('我是李四我收到发布者发布的消息', v)
      }
    }
    // 发布者
    let dep = {
      subs: [zs, ls], // 所有订阅的人
      notify: function (news) {
        // 通知所有的订阅者更新
        this.subs.forEach(sub => {
          sub.update(news)
        })
      },
      depend: function (sub) {
        // 往subs中添加订阅者
        this.subs.push(sub)
      }
    }

    // 发布消息
    dep.notify('我自横刀向天笑')
  </script>
</body>
</html>
